<template>
  <div id='consultProcessDetail'>
    <div id='entirety' style="background-image: url('/static/background/background.png')">
      <div class='wholeDiv'>
        <el-row :gutter='10' style='min-height: 85vh'>
          <el-col :span='8'>
            <el-card class='card' style='overflow:auto'>
              <div class='clearfix_d'>
                <span class='title-name' :title='detailInfo.name'>{{ detailInfo.name }}</span>
              </div>
              <div style='padding-left:15px'>
                <el-collapse accordion>
                  <el-collapse-item v-for='item in detailInfo.consultInfo' :key='item.id'>
                    <template slot='title'>
                      <el-row style='width: 100%;height: 100%;'>
                        <el-col :span='4'>
                          <span>{{ item.platformName }}</span>
                        </el-col>
                        <el-col :span='8'>
                          <span>实例：</span>
                          <span>{{ item.instanceCount }}/{{ item.vmQuota }}</span>
                        </el-col>
                        <el-col :span='8'>
                          <span>网络：</span>
                          <span>{{ item.networkCount }}/{{ item.totalNetwork }}</span>
                        </el-col>
                      </el-row>
                    </template>
                    <el-descriptions :column='2' class='bgbl'>
                      <el-descriptions-item label='硬盘'>{{ item.diskCount }}/{{ item.diskNumQuota }}
                      </el-descriptions-item>
                      <el-descriptions-item label='数据盘'>{{ item.dataDiskCount }}/{{ item.diskCapacityQuota }}
                      </el-descriptions-item>
                      <el-descriptions-item label='数据库'>{{ item.databaseCount }}/{{ item.rdsQuota }}
                      </el-descriptions-item>
                      <el-descriptions-item label='中间件'>{{ item.middlewareCount }}/{{ item.totalMiddleware }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-card>
          </el-col>
          <el-col :span='8'>
            <el-card class='card' style='overflow:auto'>
              <div class='clearfix_d'>
                <el-row>
                  <el-col :span='20'>
                    <span class='title-name' :title='detailInfo.jobInfo.name'>{{ detailInfo.jobInfo.name }}</span>
                  </el-col>
                  <el-col :span='4'>
                    <span style='color: rgb(84 112 198);' class='title-name'
                          :title='detailInfo.jobInfo.duration'>{{ detailInfo.jobInfo.duration }}</span>
                  </el-col>
                </el-row>
              </div>
              <div class='progress'>
                <div style='height:100%;width:100%;'>
                  <div ref='chart' id='chart' style='height: 25vh'></div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span='8'>
            <el-card class='card' style='overflow:auto'>
              <div class='clearfix_d'>
                <span class='title-name' :title='detailInfo.name'>{{ detailInfo.name }}</span>
              </div>
              <div v-for='(item, index) in detailInfo.graphInfo' :key='item.id' style='padding-left: 10px;padding-right: 10px;'>
                <el-progress  :color='getProgressColor(item)'
                             :text-color='getProgressTextColor(item)' :percentage='item.value' :status="item.value === 100 ? 'success' : 'exception'"
                              :text-inside="true"
                              :format="formatText(item)"
                >
                </el-progress>
                <img v-if='checkEnd(index)' class="datecenter-img"  src="/static/kt1/jiantou.png" width='35'/>
              </div>
            </el-card>
          </el-col>
          <el-col :span='24' style='padding: 5px;'>
            <el-card class='card' style='overflow:auto'>
              <el-input
                type='textarea'
                autosize
                placeholder='请输入内容'
                v-model='detailInfo.Loginfo'>
              </el-input>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script src='./js/detail.js'>
</script>
<style lang='scss'>


@font-face {
  font-family: 'Alternate';
  font-style: normal;
  font-width: normal;
}

@import './css/detail.scss';
.ellipsis {
  display: block; /* 或 inline-block，具体根据布局需要调整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>
